<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>记录</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/jiazai.css">
    <link rel="stylesheet" href="css/mui.min.css">
    <style>
        .tit-wrap {
            position: fixed;
            top: 10px;
            right: 0;
            left: 0;
            padding: 0 20px;
            font-size: 15px;
            color: #9197ae;
        }
        
        .tit-er-wrap {
            position: fixed;
            top: 40px;
            right: 0;
            left: 0;
            font-size: 15px;
            color: #9197ae;
        }
        
        .tit-er-wrap>span {
            flex: 1 1 0;
            padding: 15px 0;
            text-align: center;
        }
        
        .tit-er-wrap>.er-active {
            font-size: 17px;
            color: #2590FE;
            border-bottom: 1px solid #2590fe;
        }
        
        .change-type-active {
            font-size: 18px;
            color: white;
        }
        
        .shou-content {
            position: fixed;
            top: 94px;
            right: 0;
            left: 0;
            bottom: 0;
            padding: 0 20px;
            overflow: auto;
        }
        
        .shou-list {
            padding: 15px 0;
            border-bottom: 1px solid rgba(25, 25, 25, .2);
        }
        
        .shou-list h2 {
            font-size: 14px;
            color: white;
        }
        
        .shou-list p {
            padding-top: 4px;
            color: #9197ae;
        }
        
        .shou-list span {
            font-size: 16px;
            color: #1AD386;
        }
        
        #no-date {
            padding: 15px;
            text-align: center;
            font-size: 15px;
            color: #999;
        }
    </style>
</head>

<body style="background:#2a2c35;">
    <div id='app'>


        <!-- 加载中动画 -->
        <div id='jiazai-ani' v-if='jiazai'>
            <div class="arc"></div>
            <h1><span>LOADING</span></h1>
        </div>
        <!-- 加载中动画 -->

        <div class='tit-wrap dis-spa'>
            <img @click='_close()' src="./img/left.svg" width="22px">
            <div>
                <span style="padding-right:2px;" @click='page=1;jieData=[];title=2;getData(1);mui("#pullrefresh").pullRefresh().refresh(true);' :class="{'change-type-active':title==2}">昨日总释放</span>
                <span style="padding-left:2px;" @click='page=1;jieData=[];title=1;getData(1);mui("#pullrefresh").pullRefresh().refresh(true);' :class="{'change-type-active':title==1}">全部总释放</span>
            </div>
            <span style="opacity:0;">1</span>
        </div>

        <div class='dis-spa tit-er-wrap'>
            <span :class="{'er-active':type==8}" @click='type=8;page=1;jieData=[];getData(1);mui("#pullrefresh").pullRefresh().refresh(true);'>全部</span>
            <span :class="{'er-active':type==4}" @click='type=4;page=1;jieData=[];getData(1);mui("#pullrefresh").pullRefresh().refresh(true);'>活期释放</span>
            <span :class="{'er-active':type==5}" @click='type=5;page=1;jieData=[];getData(1);mui("#pullrefresh").pullRefresh().refresh(true);'>定期释放</span>
            <span :class="{'er-active':type==6}" @click='type=6;page=1;jieData=[];getData(1);mui("#pullrefresh").pullRefresh().refresh(true);'>邀请释放</span>
        </div>

        <div class='shou-content' id='pullrefresh'>
            <div>
                <div>
                    <div class="shou-list dis-spa" v-for="(val,index) in jieData" :key='index' @click="goInfo(val)">
                        <div>
                            <h2 v-text='val.text1'>活期收益</h2>
                            <p v-text='val.text3'>2018.12.12 12：00</p>
                        </div>
                        <span v-text='val.text2' :style="{'color':val.text2.slice(0,1)=='-'?'#F25B5B':''}">+10000.00</span>
                    </div>
                </div>
                <div id='no-date' v-if='!jieData.length'>
                    暂无更多数据
                </div>
            </div>
        </div>
    </div>
    <script src="js/comm.js"></script>
    <script src="js/vue.min.js"></script>
    <script src="js/jquery.min.js"></script>
    <script src="js/mui.min.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                jiazai: false,
                //8 :全部  4：活期  5：定期  6：邀请
                type: 8,
                page: 1,
                //2：昨日总  1：全部总
                title: 2,
                jieData: []
            },
            created: function() {
                this.getData();
            },
            methods: {
                getData: function(off) {
                    if (off == 1 && plus.os.name.toLowerCase() == 'ios') {
                        $('#no-date').remove();
                    }
                    var This = this;
                    This.jiazai = true;
                    var user = JSON.parse(localStorage.getItem('cc_user'));
                    _post(BILL_LIST, {
                        userid: user.userid,
                        session: user.session,
                        type: This.type,
                        page: This.page,
                        title: This.title
                    }, function(data) {
                        This.jiazai = false;
                        if (data.status == 1) {
                            for (var i = 0; i < data.back.length; i++) {
                                This.jieData.push(data.back[i]);
                            }
                            if (data.back.length == 0) {
                                //没有更多数据
                                mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);
                            } else {
                                //还有更多数据
                                mui('#pullrefresh').pullRefresh().endPullupToRefresh(false);
                            };
                        } else {
                            mui('#pullrefresh').pullRefresh().endPullup(true);
                        }
                    });
                },
                goInfo: function(val) {
                    // 5:活期  3：定期  6：邀请  7:市场 
                    var web = null;
                    switch (String(val.type)) {
                        case '5':
                            // 活期
                            web = _openHref({
                                url: 'bill-huoqi.html',
                                id: 'billHuoqi'
                            });
                            break;
                        case '3':
                            // 定期
                            web = _openHref({
                                url: 'bill-dinqi.html',
                                id: 'billDinqi'
                            });
                            break;
                        case '6':
                            // 邀请
                            web = _openHref({
                                url: 'bill-invi.html',
                                id: 'billInvi'
                            });
                            break;
                    }
                    setTimeout(function() {
                        web.evalJS("send('" + val.billid + "')");
                    }, 200);
                }
            }
        });


        mui.init({
            pullRefresh: {
                container: '#pullrefresh',
                up: {
                    contentrefresh: '正在加载...',
                    contentnomore: "暂无更多数据",
                    callback: pullupRefresh
                }
            }
        });

        function pullupRefresh() {
            $('#no-date').remove();
            if (mui.os.plus) {
                mui.plusReady(function() {
                    setTimeout(function() {
                        app.$data.page += 1;
                        app.getData();
                    }, 500);
                });
            } else {

            }
        };
    </script>
</body>

</html>